import React, { Component } from 'react'
import CommonEchartComp from '../../components/CommonEchartComp';
import styles from '../style/index.less'

export default class EchartsBar extends Component {
  // echarts项配置
  echartsConfig = {
    situationAnalysis: {
      title: '热线情况分析',
      options: ['年', '月'],
      color: '#64AAEA',
    }
  }
  // 生成echarts图
  getEcharts = () => {
    const { echartsModule } = this.props;
    // 生成默认时间轴
    const year = new Date().getFullYear();
    const xAxisData = [];
    for (let i = 1; i <= 12; i++) {
      xAxisData.push(`${year}年${i >= 10 ? i : '0' + i}月`);
    }
    const echartsOption = {
      containerStyle: { width: '100%', height: 300 },
      option: {}
    }
    let option = {};
    return (
      echartsModule.map(ele => {
        const { name, data } = ele;
        const { title, color } = this.echartsConfig[name];
        option = {
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{a} <br/>{b} : {c}个'
          },
          grid: {
            top: '9%',
            bottom: '10%',
            right: '5%',
            left: '9%'
          },
          series: [{
            name: title,
            data,
            color,
            type: 'bar',
          }]
        }
        echartsOption.option = option;
        return (
          <div key={name} className={styles.echarts_main} >
            {<CommonEchartComp {...echartsOption} />}
          </div>
        )
      })
    )
  }
  render() {
    return (
      <>
        {this.getEcharts()}
      </>
    )
  }
}
